<template>
  <div class="father">
    <h3>父组件</h3>

    <!-- <input type="text" v-model="username"> -->
    <!-- <input type="text"  :value="username"> -->
    <!-- <input type="text" :value="username" @input="username  = (<HTMLInputElement>$event.target).value"> -->


    <h4>名字： {{ username }}</h4>
    <h4>密码：{{ password }}</h4>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->

    <!-- v-model用在组件标签上 -->
    <!-- <AtguiguInput v-model="username" /> -->


    <!--  $event 就是子组件调用 $emit('update:modelValue', 某个值) 时传的“某个值”。  -->
    <!--  $event 本质上就是函数的形参，代表 $emit 传入的实际参数。 -->
    <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event" /> -->

    <!-- 修改modelValue -->
    <AtguiguInput
      v-model:ming="username"
      v-model:mima="password"
    />


    <!-- <Child @test="($event) => console.log($event)" /> -->


  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'
import Child from "./Child.vue";
// 数据
let username = ref('zhangsan')
let password = ref('123456')
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
